<template>
  <div class="container mx-auto px-4 py-8">
    <!-- 标题和添加用户按钮 -->
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">用户管理</h1>
      <button @click="showAddModal = true" 
              class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
        添加用户
      </button>
    </div>

    <!-- 用户列表 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
      <table class="min-w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">邮箱</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="user in users" :key="user.id">
            <td class="px-6 py-4 whitespace-nowrap">{{ user.username }}</td>
            <td class="px-6 py-4 whitespace-nowrap">{{ user.email }}</td>
            <td class="px-6 py-4 whitespace-nowrap">{{ user.role }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span :class="user.status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" 
                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                {{ user.status ? '启用' : '禁用' }}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <button @click="editUser(user)" class="text-blue-600 hover:text-blue-900 mr-2">编辑</button>
              <button @click="deleteUser(user.id)" class="text-red-600 hover:text-red-900">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑用户弹窗 -->
    <Modal v-if="showAddModal" @close="showAddModal = false">
      <form @submit.prevent="submitUser" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700">用户名</label>
          <input v-model="formData.username" type="text" required
                 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">邮箱</label>
          <input v-model="formData.email" type="email" required
                 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">密码</label>
          <input v-model="formData.password" type="password" required
                 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700">角色</label>
          <select v-model="formData.role" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
            <option value="user">普通用户</option>
            <option value="admin">管理员</option>
          </select>
        </div>
        <button type="submit" 
                class="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          提交
        </button>
      </form>
    </Modal>
  </div>
</template>

<script setup>
const users = ref([])
const showAddModal = ref(false)
const formData = ref({
  username: '',
  email: '',
  password: '',
  role: 'user'
})

// 获取用户列表
const fetchUsers = async () => {
  const { data } = await useFetch('/api/users')
  users.value = data.value
}

// 提交用户表单
const submitUser = async () => {
  await useFetch('/api/users', {
    method: 'POST',
    body: formData.value
  })
  showAddModal.value = false
  await fetchUsers()
  formData.value = { username: '', email: '', password: '', role: 'user' }
}

// 删除用户
const deleteUser = async (id) => {
  if (confirm('确定要删除该用户吗？')) {
    await useFetch(`/api/users/${id}`, { method: 'DELETE' })
    await fetchUsers()
  }
}

// 编辑用户
const editUser = (user) => {
  formData.value = { ...user }
  showAddModal.value = true
}

// 页面加载时获取用户列表
onMounted(() => {
  fetchUsers()
})
</script> 